<template>
  <div class="topBox">
    <div class="topBox-top">
      <div class="logo">
        <img src="../../../../public//confirmAnOrder/LOGO.png" alt="" />
      </div>
      <div class="searchBox">
        <div class="commodity">
          <p class="on">商品</p>
          /
          <p>店铺</p>
        </div>
        <input type="text" placeholder="请输入关键词搜索" />
        <button>搜索</button>
      </div>
      <div class="shopCarBox">
        <img
          src="../../../../public//confirmAnOrder/gouwuchexuanzhong.png"
          alt=""
        />购物车
        <p>39</p>
      </div>
    </div>
    <div class="topBox-bottom">
      <div>当前位置:</div>
      <!-- <div>当前位置:<el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>购物车</el-breadcrumb-item>
            <el-breadcrumb-item>提交订单</el-breadcrumb-item>
            <el-breadcrumb-item>确认订单</el-breadcrumb-item>
          </el-breadcrumb></div> -->
    </div>
  </div>
  <!-- <div class="middle">
    <div class="middle_left">
      <ul>
        <li>
          <div>
            <img src="../../../../public/personalCenter/组 25.png" alt="" />
            <b>账号管理</b>
          </div>
          <p class="on">个人资料</p>
          <p>资金管理</p>
          <p>收货地址</p>
          <p>优惠卡卷</p>
        </li>
        <li>
          <div>
            <img src="../../../../public/personalCenter/组 25(1).png" alt="" />
            <b>订单中心</b>
          </div>
          <p>我的订单</p>
          <p>我的收藏</p>
          <p>评价管理</p>
          <p>退货</p>
          <p>浏览记录</p>
        </li>
        <li>
          <div>
            <img src="../../../../public/personalCenter/组 25(2).png" alt="" />
            <b>服务中心</b>
          </div>
          <p>投诉管理</p>
        </li>
      </ul>
    </div>
    <div class="middle_right"></div>
  </div> -->
</template>

<script>
export default {
  name: "personalCenter",

  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
* {
  list-style: none;
  box-sizing: border-box;
  // margin: 0 auto;
}
.middle {
  width: 1240px;
  height: 804px;
  background: #ccc;
  display: flex;
  justify-content: space-around;
  .middle_left {
    width: 210px;
    height: 804px;
    border-radius: 4px;
    margin-right: 20px;
    background: aliceblue;
    ul {
      width: 210px;
      height: 804px;
      cursor: pointer;
      li {
        p {
          line-height: 45px;
          padding-left: 10px;
          font-size: 16px;
          font-weight: 400;
        }
        div {
          width: 104px;
          height: 27px;
          display: flex;
          justify-content: space-around;
          margin-top: 20px;
          margin-left: -20px;
          margin-bottom: 10px;
          img {
            width: 24px;
            height: 24px;
            margin-right: 8px;
          }
          b {
            font-size: 18px;
            color: #1289ff;
            font-weight: 400;
          }
        }
        .on {
          color: #1289ff;
        }
      }
    }
  }
  .middle_right {
    width: 1010px;
    height: 804px;
    border-radius: 4px;
  }
}
</style>
